<template>
	<view class="home">
		<headerTar title="通行新能源" :isBack="false" />
		<view class="top">
			<view class="box" @click="clickTo">
				<view class="t_left">
					<view class="t_left_t1">附近电站</view>
					<text class="t_left_t2">查看附近电站</text>
				</view>
				<view class="t_right"><img class="t_img" src="/static/index/positioning.png" alt="" /></view>
			</view>
			<view class="box">
				<view class="t_left">
					<view class="t_left_t1">常用电站</view>
					<text class="t_left_t2">查看常用电站</text>
				</view>
				<view class="t_right"><img class="t_img" src="/static/index/powerStation.png" alt="" /></view>
			</view>
			<view class="box" @click="goChargingOrder">
				<view class="t_left">
					<view class="t_left_t1">订单记录</view>
					<text class="t_left_t2">查看订单记录</text>
				</view>
				<view class="t_right"><img class="t_img" src="/static/index/record.png" alt="" /></view>
			</view>
			<view class="box" @click="clickToMap">
				<view class="t_left">
					<view class="t_left_t1">设备地图</view>
					<text class="t_left_t2">查看设备地图</text>
				</view>
				<view class="t_right"><img class="t_img" src="/static/index/map.png" alt="" /></view>
			</view>
		</view>
		<!-- 	<view class="content">
			<view class="c_box"><img class="img" src="/static/index/jifen.png" alt="">
				<view class="c_txt">充电积分</view>
			</view>
			<view class="c_box"><img class="img" src="/static/index/baozhang.png" alt="">
				<view class="c_txt">安心充电</view>
			</view>
			<view class="c_box"><img class="img" src="/static/index/qixing.png" alt="">
				<view class="c_txt">骑行保障</view>
			</view>
			<view class="c_box"><img class="img" src="/static/index/shengqian.png" alt="">
				<view class="c_txt">购物省钱</view>
			</view>
		</view> -->
		<view class="tip">
			<view class="b_title1"></view>
			<view class="b_title">附近电站</view>
			<view class="b_title2" @click="cxDingwei"><u-icon name="map" size="16"></u-icon>重新定位</view>
		</view>
		<view class="bottom">
			<view class="b_box" v-for="(item, i) in tableData" :key="i"
				:class="{'b_box_hui':isHui(item.online,item.deviceStatus)}" @click="goScanCodeDetail(item)">
				<view class="b_left">
					<view class="b_txt1">{{ item.deviceName }}</view>
					<view class="b_txt2">{{ item.address }}</view>
					<view class="b_txt3">
						<view class="c_tip">闲</view> 空闲
						<text>{{ item.idlePortNum }}</text>个插座 | 共<text>{{ item.portNum }}</text>个插座
					</view>
				</view>
				<view class="b_right">
					<view class="b_right_top">
						<view class="b_right_top_txt">
							距您{{ handleDistance(item.distance) }}
						</view>
					</view>
					<view class="b_right_bottom" @click.stop="go(item)">
						<img class="img" src="/static/index/daohang.png" alt="" />导航
					</view>
				</view>
				<view class="hui" v-if="isHui(item.online,item.deviceStatus)">
					<view class="hui_t1">
						维护中
					</view>
					<view class="hui_t2">
						不可使用
					</view>
				</view>
			</view>
			<view class="wrap" v-if="showTips">
				<u-loadmore :status="status" />
			</view>
			<view class="noData" v-if="tableData.length==0">
				附近暂无可用电桩~
			</view>
		</view>
	</view>
</template>

<script>
	import headerTar from "@/components/headerTar/header";
	import {
		nearbyDeviceApi
	} from "@/api/map.js";
	export default {
		components: {
			headerTar,
		},
		data() {
			return {
				titleName: '通行新能源',
				title: "Hello",
				tableData: [],
				status: "loadmore",
				showTips: false, //底部提示
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					total: 0,
				},
			};
		},
		onLoad() {
			this.getDWei();
		},
		onReachBottom() {
			if (this.queryParams.total < 3) return;
			this.status = "loading";
			this.showTips = true
			this.queryParams.pageNum = ++this.queryParams.pageNum;
			if (this.queryParams.total < 10) {
				this.tableData.length < 3 ?
					(this.showTips =
						false) :
					(this.status =
						"nomore");
				return;
			}
			this.getDWei();
		},
		methods: {
			goChargingOrder() {
				uni.navigateTo({
					url: "/pages/chargingOrder/chargingOrder",
				});
			},
			cxDingwei() {
				this.tableData = []
				this.queryParams.pageNum = 1
				this.queryParams.pageSize = 10
				this.total = 0
				this.getDWei();
			},
			go(v) {
				!this.isHui(v.online, v.deviceStatus) && uni.openLocation({
					latitude: v.latitude,
					longitude: v.longitude,
					name: v.deviceName,
					address: v.address,
					scale: 18
				});
			},
			isHui(val, val2) {
				let str = true;
				if (val == 1 && val2 == 1) {
					str = false
				} else {
					str = true
				}
				return str
			},
			handleDistance(val) {
				let str = "";
				val > 1000 ? (str = (val / 1000).toFixed(2) + "km") : (str = val + "m");
				return str;
			},
			clickTo() {
				uni.navigateTo({
					url: "/pages/search/search",
				});
			},
			clickToMap() {
				uni.navigateTo({
					url: "/pages/map/map",
				});
			},
			goScanCodeDetail(v) {
				!this.isHui(v.online, v.deviceStatus) && uni.navigateTo({
					url: "/pages/scanCodeDetail/scanCodeDetail?deviceId=" + JSON.stringify(v),
				});
			},

			getDWei() {
				let that = this;
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting["scope.userLocation"]) {
							console.log("没有权限");
							//拉取授权窗口
							uni.authorize({
								scope: "scope.userLocation",
								success: () => {
									uni.getLocation({
										type: "gcj02",
										success: function(res) {
											// console.log('当前位置的经度：' + res.longitude);
											// console.log('当前位置的纬度：' + res.latitude);
											//获取附近电桩
											nearbyDeviceApi({
												longitude: res.longitude,
												latitude: res.latitude,
												pageSize: that.queryParams
													.pageSize,
												pageNum: that.queryParams
													.pageNum,
											}).then((v) => {
												console.log(v);
												that.tableData = [...that
													.tableData, ...v.rows
												];
												that.queryParams.total = v
													.total;
												console.log(that.tableData);
												if (that.queryParams
													.pageSize >= v.total) {
													that.tableData.length < 3 ?
														(that.showTips =
															false) :
														(that.status =
															"nomore");
												} else {
													that.status = "loadmore";
												}
											});
										},
									});
								},
								fail: (err) => {
									uni.showModal({
										title: "提示",
										content: "若点击不授权，将无法使用位置功能",
										cancelText: "不授权",
										cancelColor: "#999",
										confirmText: "授权",
										confirmColor: "#f94218",
										success: (res) => {
											if (res.confirm) {
												uni.openSetting({
													success: (res) => {
														console.log(res
															.authSetting
														);
													},
												});
											} else if (res.cancel) {
												console.log("用户点击不授权");
											}
										},
									});
								},
							});
						} else {
							//有权限直接获取
							uni.getLocation({
								type: "gcj02",
								success: (res) => {
									// console.log("获取当前位置的接口", res);
									// console.log('当前位置的经度：' + res.longitude);
									// console.log('当前位置的纬度：' + res.latitude);
									that.latitude = res.latitude;
									that.longitude = res.longitude;
									//获取附近电桩
									nearbyDeviceApi({
										longitude: res.longitude,
										latitude: res.latitude,
										pageSize: that.queryParams.pageSize,
										pageNum: that.queryParams.pageNum,
									}).then((v) => {
										that.tableData = [...that.tableData, ...v.rows];
										that.queryParams.total = v.total;
										if (that.queryParams.pageSize >= v.total) {
											that.tableData.length < 3 ?
												(that.showTips = false) :
												(that.status = "nomore");
										} else {
											that.status = "loadmore";
										}
									});
								},
							});
						}
					},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.home {
		background-color: #f7f7f7;
		height: 100vh;
	}

	.wrap {
		padding: 14rpx;
	}

	.noData {
		width: 100%;
		margin-top: 70rpx;
		text-align: center;
		color: #8f8f94;
		background-color: #f7f7f7;
	}

	.top {
		.box {
			position: relative;
			display: inline-block;
			margin-left: 30rpx;
			margin-top: 30rpx;
			padding: 16rpx;
			width: 40%;
			height: 160rpx;
			line-height: 60rpx;
			border-radius: 10rpx;
			border: 2rpx solid #e5e5e5;
			background-color: #fff;
			overflow: hidden;

			.t_left {
				display: inline-block;

				.t_left_t1 {
					margin-top: 16rpx;
					font-size: 34rpx;
					font-weight: bold;
				}

				.t_left_t2 {
					font-size: 24rpx;
					color: #8f8f94;
				}
			}

			.t_right {
				display: inline-block;
				margin-left: 30rpx;

				.t_img {
					margin-top: -5rpx;
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
	}

	.content {
		margin: 30rpx;
		display: flex;
		height: 140rpx;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		border: 2rpx solid #e5e5e5;

		.c_box {
			flex: 1;
			line-height: 40rpx;
			padding: 10rpx 20rpx;
			text-align: center;
			background-color: #fff;

			.img {
				width: 60rpx;
				height: 60rpx;
				margin-left: 10rpx;
			}

			.c_txt {
				font-size: 24rpx;
				font-weight: bold;
			}
		}
	}

	.map {
		position: fixed;
		right: 20rpx;
		top: 50%;
		margin-top: -60rpx;
		padding: 5rpx;
		border: 2px solid #f7f7f7;
		border-radius: 20rpx;

		.m_img {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.tip {
		margin: 30rpx;
		margin-bottom: -10rpx;
		position: relative;
		display: flex;
		justify-content: space-between;
		line-height: 30rpx;

		.b_title1 {
			width: 6rpx;
			height: 32rpx;
			background-color: #3dc579;
		}

		.b_title {
			flex: 6;
			font-size: 32rpx;
			font-weight: bold;
			margin-left: 10rpx;
			margin-bottom: 30rpx;
		}

		.b_title2 {
			display: flex;
			position: absolute;
			top: 2rpx;
			right: 0rpx;
			font-size: 26rpx;
			font-weight: bold;
		}
	}

	.bottom {
		margin: 30rpx;
		border-radius: 10rpx;
		// border: 2rpx solid #e5e5e5;

		.b_box {
			position: relative;
			display: flex;
			padding: 20rpx 30rpx;
			height: 180rpx;
			border-radius: 10rpx;
			background-color: #fff;
			margin-bottom: 10rpx;

			.hui {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -60rpx;
				margin-top: -75rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 150rpx;
				height: 150rpx;
				border-radius: 75rpx;
				background-color: #6a6b6c;
				opacity: 0.7;

				.hui_t1 {
					color: #efefef;
					font-size: 36rpx;
				}

				.hui_t2 {
					color: #dfdfdf;
					font-size: 24rpx;
				}
			}

			.b_left {
				flex: 12;

				.b_txt1 {
					width: 435rpx;
					margin-top: 8rpx;
					font-size: 34rpx;
					font-weight: bold;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.b_txt2 {
					width: 435rpx;
					margin: 20rpx 0px;
					font-size: 26rpx;
					color: #8f8f94;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.b_txt3 {
					font-size: 28rpx;
					color: #8f8f94;

					.c_tip {
						display: inline-block;
						padding: 6rpx;
						margin-right: 16rpx;
						font-size: 24rpx;
						color: #fff;
						border-radius: 10rpx;
						background-color: #30bf62;
					}
				}
			}

			.b_right {
				flex: 2;

				.b_right_top {
					position: relative;
					top: 15rpx;
					padding: 5rpx 0;
					width: 165rpx;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 28rpx;
					border-radius: 90rpx;
					// border: 2rpx solid #c6c6cc;
					// vertical-align:;

					.b_right_top_txt {
						position: absolute;
						right: 10rpx;
						top: 5rpx;
						font-size: 28rpx;
						// color: #8f8f94;
					}
				}

				.b_right_bottom {
					margin-top: 70rpx;
					// padding: 4rpx 8rpx;
					width: 160rpx;
					height: 46rpx;
					color: #3dc579;
					line-height: 46rpx;
					font-size: 28rpx;
					text-align: center;
					border-radius: 50rpx;
					border: 2rpx solid #3dc579;

					.img {
						// margin-left: 10rpx;
						width: 40rpx;
						height: 40rpx;
						vertical-align: middle;
						margin-top: -6rpx;
					}
				}
			}
		}

		.b_box_hui {
			opacity: 1;
			background-color: #bcbcbc;
		}
	}
</style>